<template>
           <!-- 右边的内容 -->
           <div class="content_rigth">
            <div class="content_rigth_top">
                <div class="content_rigth_top_p">
                    <span :class="isActive===1?'active':''"  @click="getMianList">全部</span>
                    <span :class="isActive===2?'active':''" @click="gedcom" >我的创建</span>
                    <span :class="isActive===3?'active':''" @click="goMyJoin">我加入的</span>
                    <span :class="isActive===4?'active':''" @click="goMycourse">我课程的</span>
                    <el-button class="hearder-publish iconfont icon-jiahao">
             创建
            </el-button>
                </div>

            </div>
            <div class="content_rigth_button">
            <div>
                <img src="" alt="" class="content_rigth_button_img">
                <span></span>
            </div>
            <!-- 视频内容区 -->
            <div class="content-container">
                <div class="table_paging"  v-for="item in mainList" :key="item.id" v-if="mainList.length">
                    <div class="content-container_left">
                        <img :src="item.cover" :style="{width:'170px',height:'100px',borderRadius:'4px'}">
                        <div :style="{marginLeft:'30px'}"> 
                            <p class="content-container_left_name">{{item.planName}}</p>
                            <p class="content-container_left_over">已练习{{item.weekTrainedCount}}次{{Math.ceil(item.weekTrainedDuration/1000/60)}}分钟</p>
                        </div>
                    </div>  
                    <div class="content-container_rigth">
                        <div v-if="item.status==='processing'">
                            <el-icon :style="{fontSize:'20px',color:'#f93684'}"><Loading /></el-icon>
                            <p class="content-container_rigth_p">进行中</p>
                        </div>
                        <div v-else-if="item.status==='init'">
                            <el-icon :style="{fontSize:'20px',color:'#f93684'}"><RefreshLeft /></el-icon>
                            <p class="content-container_rigth_p">未开始</p>
                        </div>
                    </div>
                </div>
                <div class="find_d" v-else>
                    <img src="https://rs.dance365.com/img/no_content@3x.0fd78ad2.png" class="findImg">
                    <p class="findP">无更多数据</p>
                </div>
            </div>
            </div>
        </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Studioss",
});
</script>

<script setup lang="ts">
    import {Loading,RefreshLeft} from "@element-plus/icons-vue"
    import {getMainStudioList,getGedcomList,getJoinList,goMycourseList}from "@/api/Studio"
    import type  {mainListType} from "@/api/Studio"
    import {onMounted, ref} from "vue"
    const isActive =ref(1)
    const mainList = ref<mainListType>([])
    //初始化的时候调用函数
    onMounted(() => {
        //请求联系室全部页面
        getMianList()
    })

    //1.请求联系室全部列表
    const getMianList = async ()=>{
        isActive.value=1
      const result =   await getMainStudioList()
      mainList.value = result.content
    }
    //2.点击-我的创建-切换到我的创建
    const gedcom =async ()=>{
        isActive.value=2
        const result = await getGedcomList()
        mainList.value = result.content
    }
    //3.点击-我的加入-切换到我的加入列表
    const goMyJoin = async ()=>{
        isActive.value=3
        const result = await getJoinList()
        mainList.value = result.content
    }
    //4.点击我的课程
    const goMycourse = async ()=>{
        isActive.value=4
        const result = await goMycourseList()
        mainList.value = result.content
    }
</script>

<style lang="scss" scoped>
    .content_rigth{
    width: 1020px;
    margin-left: 10px;
    .content_rigth_top{
        height: 96px;
        display: flex;
        border-radius: 3px;
        background-color: #ffffff;
        .content_rigth_top_p{
            padding-top: 45px;
            margin-left: 20px;
            color: #7d8090;
        }
        .content_rigth_top_p span{
            padding: 9px 12px;
            font-size: 14px;
            margin:10px
        }
        .hearder-publish {
            margin-left: 600px;
            margin-bottom: 30px;
            width: 75px;
            height: 30px;
            box-sizing: border-box;
            background-color: #f93684;
            color: white;
            border-radius: 20px;
            float: right;
            text-align: center;
            line-height:30px;
            margin-right: 28px;
            margin-top: -25px;
}
    }
    .content_rigth_button{
        padding:0  30px 10px 30px ;
        width: 960px;
        min-height: 600px;
        margin-top: 10px;
        background-color: #ffffff;
    }
}
.active{
        background-color: #f93684;
        color: #fff;
        border-radius: 3px;
    }

//
.content-container{
    .table_paging{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: #e3e3e3 1px solid;
        .content-container_left{
            display: flex;
            .content-container_left_name{
                font-weight: 700;
                font-size: 16px;
                color: #111;
            }
            .content-container_left_over{
                margin-top: 25px;
                font-size: 14px;
                color: #7d8090;
            }
        }
        .content-container_rigth{
            width: 42px;
            height: 48px;
            text-align: center;
            margin-top: 20px;
            .content-container_rigth_p{
                margin-top: 9px;
                font-size: 14px;
                color: #7d8090;
            }
        }
    }

    .find_d{
        position: absolute;
        .findImg{
            position: relative;
            top: 140px;
            left: 370px;
            width: 225px;
            height: 225px;
            
        }
        .findP{
            color: rgb(177, 181, 193);
            font-size: 20px;
            position: relative;
            top: 157px;
            left: 430px;
        }
}
}
</style>